@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;}

body{
					background-image:url("images/z10.jpg");
					background-repeat:no-repeat;
					background-size:cover;
					overflow:hidden;}
				.all{
					position:relative;}
					
				ul{
					width:200px;
					height:200px;
					background-color:#666;
					position:absolute;
					bottom:100px;
					left:28%;
					margin-left:-100px;
					list-style:none;
					font-size:30px;
					text-align:center;
					line-height:200px;
					transform-style:preserve-3d;
					transform:rotateY(0deg);
					animation:sport 10s linear 0s infinite;
					background-image:url("images/z8.jpg");
					background-size:200px 200px;
					z-index:10;
					}
				ul li{
					width:200px;
					height:200px;
					font-size:30px;
					text-align:center;
					line-height:200px;
					position:absolute;
					left:0;
					top:0;
					}
				ul li img{
					width:200px;
					height:200px;
					border:3px solid #FF3;
					box-sizing:border-box;}
					
				   ul li:nth-child(1){
					background-color:#F00;
					transform:rotateY(60deg) translateZ(200px);
					}
					ul li:nth-child(2){
					background-color:#0F0;
					transform:rotateY(120deg) translateZ(200px);}
					ul li:nth-child(3){
					background-color:#00F;
					transform:rotateY(180deg) translateZ(200px);}
					ul li:nth-child(4){
					background-color:#FF0;
					transform:rotateY(240deg) translateZ(200px);}
					ul li:nth-child(5){
					background-color:#0FF;
					transform:rotateY(300deg) translateZ(200px);}
					ul li:nth-child(6){
					background-color:#F0F;
					transform:rotateY(360deg) translateZ(200px);}
					
					.loge{
						position:absolute;
						height:100px;
						width:100px;
						left:-50px;
						bottom:100px;
						animation:move 10s  linear infinite;
						z-index:11;
						}
					.loge:hover{
						
						animation-play-state:paused;
					}
					@keyframes sport{
						from{
							transform:rotateX(-15deg) rotateY(0deg);
							}
						
						to{
							transform:rotateX(-15deg) rotateY(360deg);}}
					ul:hover{
						animation-play-state:paused;}
					ul:hover li{

						opacity:0.5;
						}
						ul li:hover{                      
						opacity:1;
						}
						ul li:hover img{
							transform:scale(1.1);
							}
				@keyframes move{
					
					0%{
						left:-50px;
						bottom:100px;
						opacity:0}
					20%{
						left:300px;
						bottom:550px;
						opacity:0.8;
						}
					 40%{
						  left:536px;
						  bottom:281px;
						  opacity:1;
  
						  }
					 60%{
						  left:800px;
						  bottom:550px;
						  opacity:0.7;
  
						  }
					80%{
						left:1285px;
						bottom:140px;
						opacity:1;
						}
					100%{
						left:800px;
						bottom:-100px;
						opacity:0;
						}
					}
              .loge1{
				  width:500px;
				  height:500px;
				  position:absolute;
				  top:-250px;
				  left:1000x;
				 animation:snow1 15s linear infinite;
				 
			  }
			  .loge2{
				  width:500px;
				  height:500px;
				  position:absolute;
				  top:-500px;
				  left:1000x;
				  animation:snow2 10s linear infinite;
				
			  }
			  @keyframes snow1{
				  0%{
					 left:0px;
                     top:0px;
					 
				  }
				  100%{
					 left:1200px;
                     top:300px;  
					 opacity:0;
				  }
			  }
			   @keyframes snow2{
				  0%{
					 left:0px;
                     top:0px;
					 
				  }
				  100%{
					 left:1200px;
                     top:300px;  
					 opacity:0;
				  }
			  }
